<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>个人信息管理</title>
<%@ include file="../include/jquerylib.jsp" %>
<script type='text/javascript' src="<%=request.getContextPath() %>/js/DatePicker/WdatePicker.js" defer="defer"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js_css_image/lhgdialog/lhgcore.lhgdialog.min.js?skin=mac"></script>
<link href="<%=request.getContextPath() %>/js_css_image/_doc/common.css" type="text/css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/web/style/layout.css" />
<script type="text/javascript" src="<%=request.getContextPath() %>/js/password_strength_plugin.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.validate.min.js"></script>
<script type='text/javascript' src="<%=request.getContextPath() %>/js_css_image/js/base/jquery.form.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/additional-methods.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/CJL.0.1.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/QuickUpload.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/ImagePreviewd.js"></script>
<script type="text/javascript">
         var api = frameElement.api;
         if (api!=undefined)
         {
         	var W = api.opener;
         }
</script>
<c:if test="${requestScope.message != null}">
  <script type="text/javascript">
  		 alert("<c:out value='${requestScope.message}'></c:out>");
  		 if(api!=null){
  			 api.close();
  			 W.refreshIt();
  		 }
 </script>
</c:if>
<style type="text/css">
		     html{
		       font-size:12px;
		       font-family:"Microsoft YaHei";
		       color: #333;
		     }
			.input_info{
				width:250px;
			}
			.td_label {
			    width:260px;
			    background-color: #FFFFFF;
			    text-align: right;
			    height: 20px;
			}
			.td_value {
			    text-align: center;
			    background-color: #FFFFFF;
			    height: 20px;
			}
			.td_picture {
			    text-align: left;
			    padding-left:50px;
			    background-color: #FFFFFF;
			}
			.top_testresult{ 
				font-weight: bold; 
				font-size:13px; 
				font-family: arail,helvetica,san-serif; 
				color:#666; 
				padding:0; 
				margin:0 0 2px 0; 
				width:450px;
				}
#idPicFile {
    width:80px;height:20px;overflow:hidden;position:relative;
    background:url(http://www.cnblogs.com/images/cnblogs_com/cloudgamer/169629/o_addfile.jpg) center no-repeat;
}
#idPicFile input {
    font-size:20px;cursor:pointer;
    position:absolute;right:0;bottom:0;
    filter:alpha(opacity=0);opacity:0;
    outline:none;hide-focus:expression(this.hideFocus=true);
}   				 
</style>
<script type="text/javascript">
	
	$(document).ready( function() {
		var username = document.getElementById("username");
		// When a link is clicked  选项卡
		$(function(){ 
		    $("#tabs").tabs({ 
		        //disabled:[1],//定义不可用元素 
		        selected:2 
		        }); 
		}) 

		var options = {
    	    url:'<%=request.getContextPath() %>/user/updateUserInfo.action',
    	    beforeSubmit: checkForm,
    	    dataType:'json',
    	    success: function(data) {
    	      if(data.ajaxResult=='success'){
					alert("更新成功");
					api.close();
       			 	refreshGX();
    	      }
    	}};
		$('#submitBtn').click(function(){
			$('#fom input').keyup(trimkeyup);
			//表单提交
	    	$('#fom').ajaxSubmit(options);
	            return false;
    	 });
		//------------------证书列表-----------------------------
		    var common_width = window.screen.width-0;
            var common_height = window.screen.height-505;
			$("#gridTable").jqGrid({
				url:'cerifyInfo.action',
				datatype: "json",
				height: common_height-1005,
				width:common_width-800,
				colNames:['id','证书获取人','证书获取时间','证书类型','证书有效期','创建时间','修改时间'],
				colModel:[
						{name:'ID',index:'ID', width:60, key:true, sorttype:"int",hidden:true,hidedlg:true}, 
						{name:'USERNAME',index:'USERNAME', width:120},								
						{name:'CERIFY_DATE',index:'CERIFY_DATE', width:130},
						{name:'CERIFY_TYPE',index:'CERIFY_TYPE', width:100},
						{name:'CERIFY_OVERDATE',index:'CERIFY_OVERDATE', width:100},
						{name:'CRTTIME',index:'CRTTIME', width:90,
						  formatter:'date',editrules:{date:true},search:false,editable:false,
					      formatoptions: {srcformat:'Y-m-d',newformat:'Y-m-d'},datefmt:'Y-m-d H:i:s'},
					    {name:'MDFYTIME',index:'MDFYTIME', width:100,
						  formatter:'date',editrules:{date:true},search:false,editable:false,
					      formatoptions: {srcformat:'Y-m-d',newformat:'Y-m-d'},datefmt:'Y-m-d H:i:s'}	
			],
			shrinkToFit:false,
			sortname:'ID',
			sortorder:'desc',
			viewrecords:true,
			multiselect: true, // 是否显示复选框
			multiboxonly : true, 
			//gridview: true,  //提升速度
			rownumbers: true,//显示行号
			rownumWidth: 30, //行号的宽度
			rowNum:<%=session.getAttribute("SYS_PAGECOUNT")%>,
			rowList:[15,20,50,200,500],
			toolbar: [false,"top"],
			jsonReader: {
				root:"rows",		// 数据行（默认为：rows）
				page: "page",  	// 当前页
				total: "total",  // 总页数
				records: "records",  // 总记录数
				repeatitems : false		// 设置成false，在后台设置值的时候，可以乱序。且并非每个值都得设
			},
			prmNames:{rows:"rows",page:"page",sort:"sidx",order:"sord",search:"search"},
			pager:"#gridPager",
			caption: "证书管理列表"									
	    });
	    $("#consoleDlg").dialog({
	        autoOpen: false,      
	        modal: true,    // 设置对话框为模态（modal）对话框  
	        resizable: true,      
	        width: 700,  
	        buttons: {  // 为对话框添加按钮  
	            "关闭": function() {$("#consoleDlg").dialog("close")}
	        }  
	    }); 
		 jQuery("#gridTable").jqGrid('navGrid','#gridPager',{add:false,edit:false,del:false,search:false,refresh:false});
			jQuery("#gridTable").jqGrid('navButtonAdd','#gridPager',
						{ 	
						caption: "",                          
						title: "Reorder Columns",                           
						onClickButton : function (){                               
						jQuery("#gridTable").jqGrid('setColumns');                           
						}
			}); 
						doResize(); 	
		//------------------证书列表-----------------------------
	}); 
	function checkForm(){
			var flag = true;
			if($("#username").val()==""){
				alert("姓名不能为空!");
				$("#username").focus();
				return false;
			}else if(!checkExp($("#username").val())){
				alert("姓名不能含有特殊符号!");
				$("#username").focus();
				return false;
			}else if(!userNameCountintlen($("#username").val())){
				alert("姓名最多为40个字符,字符输入超出限制!");
				$("#username").focus();
				return false;
			}
			
			if($("#companyTel").val()!= ""){
				if(!checkPhone($("#companyTel").val())){
					alert("请输入正确的单位电话号码,如:0920-29392929!");
					$("#companyTel").focus();
					return false;
				}
			}
			
			if($("#mobile").val() != ""){
				if(!checkMobile($("#mobile").val())){
					alert("请输入正确的移动电话!");
					$("#mobile").focus();
					return false;
				}
			}
			
			if($("#email").val()!= ""){
				if(!checkEmail($("#email").val())){
					alert("请输入电子邮件地址,如a@example.com!");
					$("#email").focus();
					return false;
				}
			}
			
			if($("#idFile").val()!= ""){
				if(!checkPic($("#idFile").val())){
					alert("头像图片格式不对,请上传jpg、jpeg、bmp、gif、png类型的图片!");
					$("#idFile").focus();
					return false;
				}
			}
			if($("#signFile").val()!= ""){
				if(!checkPic($("#signFile").val())){
					alert("签名图片格式不对,请上传jpg、jpeg、bmp、gif、png类型的图片!");
					$("#signFile").focus();
					return false;
				}
			}
			if($("#stampFile").val()!= ""){
				if(!checkPic($("#stampFile").val())){
					alert("印章图片格式不对,请上传jpg、jpeg、bmp、gif、png类型的图片!");
					$("#stampFile").focus();
					return false;
				}
			}
		}
		    //过滤表单的前后空格
			function trimkeyup(e) {
			     lucene_objInput = $(this);
			     if (e.keyCode != 38 && e.keyCode != 40 && e.keyCode != 13) {
			        var im = $.trim(lucene_objInput.val());
			       lucene_objInput.val(im); 
			    }
			} 
		    function userNameCountintlen(input){
				var result = $("#username").val().length;
				if (result > 40) {
					return false;
				}else{
					return true;
				}
			}
			//验证特殊字符
			function checkExp(inputData){ 
				var regEx = new RegExp(/^(([^\^\.<>%&',:;=?$"'#@!~\]\[{}【】￥（）！·‘’”“。，、？：；—|\/\\/`\|])*)$/);
				var result = inputData.match(regEx);
				if (result == null) {
					return false;
				}
				return true;
			}
		    //验证公司电话
			function checkPhone(inputData){ 
				var regEx = new RegExp(/^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/);
				var result = inputData.match(regEx);
				if (result == null) {
					return false;
				}
				return true;
			}
		    //验证移动电话
			function checkMobile(inputData){ 
				var regEx = new RegExp(/^[0-9]{11}$/);
				var result = inputData.match(regEx);
				if (result == null) {
					return false;
				}
				return true;
			}
		    
		    //验证电子邮件
			function checkEmail(inputData){ 
				var regEx = new RegExp(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/);
				var result = inputData.match(regEx);
				if (result == null) {
					return false;
				}
				return true;
			}
		    //验证图片
			function checkPic(inputData){ 
				var regEx = new RegExp(/.+(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png)$/);
				var result = inputData.match(regEx);
				if (result == null) {
					return false;
				}
				return true;
			}
		    //---------------证书-----------------------
		    //执行大小
			function doResize() { 
				var ss = getPageSize(); 
					 $("#gridTable").jqGrid('setGridHeight', ss.WinH-145);
					 $("#gridTable").jqGrid('setGridWidth', ss.WinW-30); 
			} 
			
			//delete
			function deleteCerity(){
				var ids = $("#gridTable").jqGrid("getGridParam", "selarrrow") + "";
			    if (!ids) {
			    alert("请先选择记录!");  
			       return false;  
				} 
		       
				if(!confirm("是否确认删除 ？")){
				   return false;
				}
				 var params = {  
				        "ids": ids
				    };  
				    var actionUrl = "deleteCerity.action";  
				    $.ajax({  
				        url : actionUrl,  
				        type : "post", 
				        data : params,  
				        dataType : "json",  
				        cache : false,  
				        error : function(textStatus, errorThrown) {  
				            alert("系统ajax交互错误: " + textStatus.value);  
				        },  
				        success : function(data, textStatus) {  
				        	if(data.ajaxResult=='success'){
				        		alert("删除成功！");       
				        		refreshIt();    
				        	}else{
				        		alert("删除失败！");     
				        	   }
					     }  
			    });
			}
		 //查看
			function download(){
			var ids= $("#gridTable").jqGrid("getGridParam", "selarrrow") + "";
				if(ids){
					var parentIds = ids.split(",");
					if(parentIds.length>1){
						alert("请一个一个下载！");
						return;
					}
					var result = window.location.href="download.action?id="+ids;
					if(result == 'success'){
						alert("保存成功！");
						location.reload();
					}
				}else{
					alert("请选择记录");
				}
		    }
			//刷新
			function refreshIt(){
				jQuery("#gridTable").jqGrid('setGridParam',
						{
							url:'cerifyInfo!cerifyInfoExec.action'
						}).trigger("reloadGrid", [{page:1}]); 
			}
			function refreshGX(){
				window.location.href="<%=request.getContextPath() %>/user/personinfo.jsp";
			}
			function addCerity(){
				$.dialog({
		        id:'cerify',
		        title:'证书上传', 
		        content:'url:<%=request.getContextPath() %>/user/cerity_add.jsp',
		        okVal:false,//确定按钮文字
		        cancelVal:false,//取消按钮文字
		        min:true, //是否显示最小化按钮
		        max:false,//是否显示最大化按钮
		        fixed:false,//开启静止定位
		        lock:true,//开启锁屏
		        focus:true,//弹出窗口后是否自动获取焦点（4.2.0新增）
		        time:null,//设置对话框显示时间
		        resize:true,//是否允许用户调节尺寸
		        drag:true,//是否允许用户拖动位置
		        cache:false,//是否缓存iframe方式加载的窗口内容页
		        width: '550px',
		        height: 280
		         
	          });
			}
			function updateCerity(){
				var ids= $("#gridTable").jqGrid("getGridParam", "selarrrow") + "";
				if (!ids) {
				    alert("请先选择记录!");  
				    return false;  
				}
				if(ids.indexOf(",")!=-1){
					  alert("只能选择一条记录!");  
				        return false; 
				}
				var row = jQuery("#gridTable").jqGrid('getRowData',ids);//获取选中行.
				var rid = row.ID;//获取选中行的id属性
				
				$.dialog({
			        id:'cerify',
			        title:'修改证书', 
			        content:'url:<%=request.getContextPath() %>/user/checkOneCerify.action?id='+rid,
			        okVal:false,//确定按钮文字
			        cancelVal:false,//取消按钮文字
			        min:true, //是否显示最小化按钮
			        max:false,//是否显示最大化按钮
			        fixed:false,//开启静止定位
			        lock:true,//开启锁屏
			        focus:true,//弹出窗口后是否自动获取焦点（4.2.0新增）
			        time:null,//设置对话框显示时间
			        resize:true,//是否允许用户调节尺寸
			        drag:true,//是否允许用户拖动位置
			        cache:false,//是否缓存iframe方式加载的窗口内容页
			        width: '550px',
		        	height: 280
			         
	          });
			}
			function reload(){
			   location.reload();
	        }
		    //--------------------------------------
		</script>
</head>
<body>
<div id="tabs">
  <ul style="border-top:0px;border-left:0px;border-right:0px;">
    <li><a href="#tab-1">个人信息</a></li>
    <li><a href="#tab-2">证书</a></li>
  </ul>
  <div id="tab-1" >
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td style=" height:600px;">
        	<form class="fom" id="fom" method="post" action="" enctype="MULTIPART/FORM-DATA" >
	            <input type="hidden" name="userId" value="<s:property value="users.userid" />">
	            <table border="0" cellpadding="4" cellspacing="1" align="center" width="100%" >
	              <tr>
	                <td width="260" class="td_label">用&nbsp;户&nbsp;名:</td>
	                <td width="627" align="left"><input type="text" name="users.loginname" id="loginname" readonly class="input_info" style="width:450px; height:25px; padding-top:3px;" id="loginName" value="<s:property value="users.loginname" />" onkeydown="if(event.keyCode==8)return false;" /></td>
	                <td width="356" rowspan="3"><span >头像预览</span>
	                  <input id="idFile" name="uploadImg" type="file" style="width: 140px;"/>
	                <div style="width:120px; height:120px; padding:2px;border:1px solid #666; margin-left:30px;"> <img id="idImg" style="width:120px; height:120px;repeat-x;border:0px;" src="<c:if test='${users.imgAddress==null }'><%=request.getContextPath() %>/user/img/insertpicture.png</c:if>
					                           <c:if test='${users.imgAddress!=null }'><%=request.getContextPath()%>/user/printImage!print.action?path=${users.imgAddress}</c:if>"/> </div></td>
	              </tr>
	              <tr>
	                <td class="td_label">姓　　名:</td>
	                <td align="left"><input type="text" id="username" name="username" class="input_info" style="width:450px; height:25px; padding-top:3px;" value="<s:property value="users.username" />" /><font color="red">*</font></td>
	              </tr>
	              <tr>
	                <td class="td_label">性　　别:</td>
	                <td align="left">
	                	<select  class="input_info" style="width:450px; height:25px; padding-top:3px;" id="sex"  name="sex" >
		                    <option   value='0'>请选择</option>
		                    <option   value='1' <s:if test="users.sex==1">selected="selected"</s:if>>男</option>
		                    <option   value='2'  <s:if test="users.sex==2">selected="selected"</s:if>>女</option>
	                  	</select> 
	                 </td>
	              </tr>
	              <tr>
	                <td class="td_label">职　　务:</td>
	                <td align="left">
	                	<select  class="input_info" style="width:450px; height:25px; padding-top:3px;" id="posname"  name="posName" >
		                    <option   value='0'>请选择</option>
		                    <option   value='1' <s:if test="users.posName==1">selected="selected"</s:if>>助工</option>
		                    <option   value='2' <s:if test="users.posName==2">selected="selected"</s:if>>工程师</option>
		                    <option   value='3' <s:if test="users.posName==3">selected="selected"</s:if>>高级工程师</option>
		                    <option   value='4' <s:if test="users.posName==4">selected="selected"</s:if>>研究员</option>
	                  </select>
	                </td>
	                <td><span >签名预览</span>
	                  <input id="signFile" name="uploadSign" type="file" style="width: 140px;"/></td>
	              </tr>
	              <tr>
	                <td class="td_label">单位电话:</td>
	                <td align="left"><input type="text" name="companyTel" id="companyTel" class="input_info" style="width:450px; height:25px; padding-top:3px;" value="${users.companyTel}" /></td>
	                <td rowspan="3" nowrap >
	                	<div style="width:120px; height:120px; padding:2px;border:1px solid #666; margin-left:30px;"> <img id="signImg" style="width:120px; height:120px;" src="<c:if test='${users.signAddress==null }'><%=request.getContextPath() %>/user/img/insertpicture.png</c:if>
					    <c:if test='${users.signAddress!=null }'><%=request.getContextPath()%>/user/printImage!print.action?path=${users.signAddress}</c:if>"/>
					    </div>
					</td>
	              </tr>
	              <tr>
	                <td class="td_label">移动电话:</td>
	                <td align="left"><input type="text" id="mobile" name="mobile" class="input_info"  style="width:450px; height:25px; padding-top:3px;" value="<s:property value="users.mobile" />" /></td>
	              </tr>
	              <tr>
	                <td class="td_label">电子邮件:</td>
	                <td align="left" nowrap ><input type="text" id="email" name="email" class="input_info" style="width:450px; height:25px; padding-top:3px;" value="<s:property value="users.email" />" /></td>
	              </tr>
	              <tr>
	                <td class="td_label">&nbsp;</td>
	                <td align="left"></td>
	                <td rowspan="3" nowrap >&nbsp;<span>印章预览</span>
					<input id="stampFile" name="uploadStamp" type="file" style="width: 140px;"/>
						 <div style="width:120px; height:120px;padding:2px;border:1px solid #666; margin-left:30px;"> <img id="stampImg" style="width:120px; height:120px;" src="<c:if test='${users.stampAddress==null }'><%=request.getContextPath() %>/user/img/insertpicture.png</c:if>
					      <c:if test='${users.stampAddress!=null }'><%=request.getContextPath()%>/user/printImage!print.action?path=${users.stampAddress}</c:if>"/> 
					      </div>
					 </td>
	              </tr>
	              <tr>
	                <td class="td_label"></td>
	                <td></td>
	              </tr>
	              <tr>
	                <td class="td_label"></td>
	                <td></td>
	              </tr>
	              <tr>
	                <td colspan="4" style="background-color:#f3f3f3;text-align:center;height:20px;font-size:14px;font-weight:bold;"><span>
	                  <input id ="submitBtn" name="submitBtn" type="button" class="button_b" style="width:80px;" value="更 新" />
	                  </span> <span>
	                  <input  id="cancel" name="reset" type="reset" class="button_b" style="width:80px;" value="重 置" />
	                  </span> </td>
	              </tr>
	            </table>
	            <script>
					    var ip = new ImagePreview( $$("idFile"), $$("idImg"), {
					        maxWidth: 120, maxHeight: 120, action: "viewImg.jsp"
					    });
					    //ip.img.src = ImagePreview.TRANSPARENT;
					    ip.file.onchange = function(){ ip.preview(); };
					   
					  
					    var signip = new ImagePreview( $$("signFile"), $$("signImg"), {
					        maxWidth: 120, maxHeight: 120, action: "viewImg.jsp"
					    });
					    //signip.img.src = ImagePreview.TRANSPARENT;
					    signip.file.onchange = function(){ signip.preview(); };    
					    
					    var stampip = new ImagePreview( $$("stampFile"), $$("stampImg"), {
					        maxWidth: 120, maxHeight: 120, action: "viewImg.jsp"
					    });
					    //signip.img.src = ImagePreview.TRANSPARENT;
					    stampip.file.onchange = function(){ stampip.preview(); }; 
				</script>
          </form>
        </td>
      </tr>
    </table>
  </div>
  <div id="tab-2" >
    <script type="text/javascript">
		$(document).ready(function(){
											
            }); 
		
	 </script>
    <form action="" method="post">
      <table style="width: 100%;"   class="tableCont">
        <tr>
          <td>
            <input id="add" type='button' value='上 传' onclick="addCerity();" class='button_b' style="width:80px;"/>
            <input id="update" type='button' value='修改' onclick='updateCerity();' class='button_b' style="width:80px;"/>
            <input id="search" type='button' value='查看' onclick='download()' class='button_b' style="width:80px;"/>
            <input id="delete" type='button' value='删 除' onclick='deleteCerity();' class='button_b' style="width:80px;"/>
            <input id="refresh" type='button' value='刷新' onclick='refreshIt()' class='button_b' style="width:80px;"/>
          </td>
        </tr>
        <tr>
          <td colspan="4"><table id="gridTable">
            </table>
            <div id="gridPager"></div></td>
        </tr>
      </table>
    </form>
  </div>
</div>
</body>
</html>
